<template>
	<div>
		<!--高级查询的表单-->
		<el-form size="mini" :inline="true" :model="empQuery" class="demo-form-inline" style="margin-top: 30px">
			<el-form-item label="用户名">
				<el-input v-model="empQuery.username" placeholder="用户名模糊查询"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="empQuery.state" placeholder="请选择状态">
					<el-option label="正常" value="shanghai"></el-option>
					<el-option label="锁定" value="beijing"></el-option>
					<el-option label="注销" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
				<el-button type="success" @click="dialogFormVisible=true;saveForm={}">新增</el-button>
			</el-form-item>
		</el-form>
		<!--高级查询表单-->

		<!--表格-->
		<el-table
				border
				:data="tableData"
				style="width: 100%">

			<el-table-column
					label="用户名"
					prop="username"
			>
			</el-table-column>


			<el-table-column
					prop="email"
					label="邮箱"
					>
			</el-table-column>

			<el-table-column
					prop="phone"
					label="手机号"
					>
			</el-table-column>

			<el-table-column
					prop="password"
					label="密码"
					>
			</el-table-column>

			<el-table-column
					prop="age"
					label="年龄"
					>
			</el-table-column>

			<el-table-column
					prop="state"
					label="状态"
					>
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.state==1">正常</el-tag>
					<el-tag type="danger" v-if="scope.row.state==2">锁定</el-tag>
					<el-tag type="info" v-if="scope.row.state==3">注销</el-tag>

				</template>
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
							size="mini"
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button
							size="mini"
							type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--------------------------------------------------------->

		<!--分页-->
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="empQuery.pageNum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="empQuery.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
		</el-pagination>
		<!-------------------->

		<!--新增修改的模态框-->
		<el-dialog title="员工编辑" :visible.sync="dialogFormVisible">
			<el-form :model="saveForm" :rules="rules" ref="ruleForm">
				<el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
					<el-input v-model="saveForm.username" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="邮箱" :label-width="formLabelWidth">
					<el-input v-model="saveForm.email" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="手机号" :label-width="formLabelWidth">
					<el-input v-model="saveForm.phone" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
					<el-input v-model="saveForm.password" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="年龄" :label-width="formLabelWidth">
					<el-input v-model="saveForm.age" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="状态" :label-width="formLabelWidth">
					<el-select v-model="saveForm.state" placeholder="请选择状态">
						<el-option label="正常" value="1"></el-option>
						<el-option label="锁定" value="2"></el-option>
						<el-option label="注销" value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
		</el-dialog>

		<!----------------------->

	</div>
</template>
<script>
	export default {
		data() {
			return {
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
					],

				},
				formLabelWidth: '120px',
				dialogFormVisible: false,
				saveForm: {},
				total:0,
				empQuery:{
					pageNum:1,
					pageSize:5
				},
				tableData: [],
				formInline: {
					user: '',
					region: ''
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//alert('submit!');
						this.save();
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			save(){
				this.$http.post("/emp/saveandupt",this.saveForm).then(res=>{
					if (res.data.success){
						this.$message.success(res.data.msg);
					}else{
						this.$message.info(res.data.msg);
					}
					this.handleCurrentChange(1);
				})
				this.dialogFormVisible = false;
			},
			handleSizeChange(val) {
				this.empQuery.pageSize=val;
				this.empQuery.pageNum=1;
				this.findEmpQuery();
			},
			handleCurrentChange(val) {
				this.empQuery.pageNum=val;
				this.findEmpQuery();
			},
			handleEdit(index, row) {
				//发请求回显
				this.$http.get("/emp/findempbyid?id="+row.id).then(res=>{
						this.saveForm=res.data
				})
				//打开模态框
				this.dialogFormVisible = true;


				console.log(index, row);
			},
			handleDelete(index, row) {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http.get("/emp/del?id="+row.id).then(res=>{
							if (res.data.success){
								this.$message.success(res.data.msg)
							}else{
								this.$message.info(res.data.msg)
							}
							this.handleCurrentChange(1);
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});


			},
			onSubmit() {
				this.findEmpQuery();
				this.handleSizeChange(1);
			},
			findEmpQuery(){
				this.$http.post("/emp/findbyquery",this.empQuery).then(res=>{
					this.tableData = res.data.list;
					this.total = res.data.total;
				})
			}

		},
		mounted() {
			this.findEmpQuery()
			/*this.$http.get("/emp/findall").then(res=>{
				this.tableData = res.data;
			})*/

		}
	}

</script>

<style>

</style>